<script setup lang="tsx">
import { ref, inject } from 'vue';
import MyTable from '@/components/myTable/index.vue';
import QueryBox from '@/components/queryBox/index.vue';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { getList } from '@/api/member/proxyStatistics';
const addDateRange = inject<typeof addDateRange>('addDateRange');
const data = ref([]);
const columns = [
  {
    title: '笔数',
    colKey: 'num',
  },
  {
    title: '金额',
    colKey: 'amount',
  },
];

const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 0,
});

interface FormDataType {
  username: string | null;
  uid: string | number | null;
  pageNum: string | number | null;
  pageSize: string | number | null;
  type: string | number | null;
}
const INITIAL_QUERYFORM: FormDataType = {
  username: undefined,
  uid: undefined,
  pageNum: null,
  pageSize: null,
  type: '20',
};
const queryForm = ref({ ...INITIAL_QUERYFORM });

const dateRange = ref<string[]>([]);
const balanceRange = ref<[number | null, number | null]>([null, null]);
const render = () => (
  <>
    <QueryBox onReset={onReset} v-model:defaultCurrent={pagination.value.defaultCurrent} onSearch={unGetList}>
      {/* <t-input v-model={queryForm.value.uid} placeholder="UID" style="width: 240px;">
        {{
          prefixIcon: () => <SearchIcon />,
        }}
      </t-input> */}
      <t-input v-model={queryForm.value.username} placeholder="账号(输入账号才能查询到数据)" style="width: 240px;">
        {{
          prefixIcon: () => <SearchIcon />,
        }}
      </t-input>
      <t-date-range-picker v-model={dateRange.value} placeholder="日期" />
      <t-select v-model={queryForm.value.type}>
        <t-option key="20" label="充值" value="20" />
        <t-option key="21" label="提现" value="21" />
      </t-select>
    </QueryBox>
    <MyTable
      columns={columns}
      data={data.value}
      v-model:pagination={pagination.value}
      rowKey="amount"
      onUnGetList={unGetList}
    ></MyTable>
  </>
);

const unGetList = async () => {
  if (!queryForm.value.username) {
    MessagePlugin.error('请输入账号进行搜索');
    return;
  }
  try {
    queryForm.value.pageNum = pagination.value.defaultCurrent;
    queryForm.value.pageSize = pagination.value.defaultPageSize;
    const res = await getList({
      ...addDateRange?.(queryForm.value, dateRange.value),
    });
    data.value = res.rows;
    pagination.value = {
      ...pagination.value,
      total: res.total,
    };
  } catch (e) {
    console.log(e);
  }
};

const onReset = () => {
  queryForm.value = { ...INITIAL_QUERYFORM };
  balanceRange.value = [null, null];
  dateRange.value = [];
  pagination.value.total = 0;
  if (data.value.length) {
    data.value = [];
  } else {
    MessagePlugin.error('请输入账号进行搜索');
  }
};
</script>

<template>
  <div>
    <render />
  </div>
</template>
